<%@ page import="java.util.Objects" %>
<%@ page import="static com.oracle.wls.shaded.org.apache.xalan.xsltc.compiler.sym.error" %>
<%@ page import="java.util.List" %><%--
  Created by IntelliJ IDEA.
  User: 20386
  Date: 2023/12/8
  Time: 12:46
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<%
    List<String> errors = (List<String>) request.getAttribute("errors");
%>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>添加图书表单</title>
    <script type="text/javascript" src="${ctx}/js/jquery-3.6.1.js"></script>

    <style>
        li {
            list-style: none;
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }

        form {
            display: flex;
            width: 400px;
            flex-direction: column;
            border: 1px solid#ccc;
            border-radius: 10px 15px;
        }

        .box>li {
            margin-bottom: 45px;
        }

        .box>li>label {
            font-size: 20px;
        }

        .box>li>input[type='text'] {
            height: 25px;
            width: 250px;
            border-radius: 5px 5px;
        }


        .box>li>button[type='submit'] {
            width: 100px;
            margin-left: 10px;
        }
        .box>li>button[type='reset']{
            width: 100px;
            margin-left: 100px;

        }
        .box>li>#errorTip
        {
            float: left;
            height: 30px;
            line-height: 30px;
            margin-left: 70px;
            color: #e62e2e;
            display: none;
        }
    </style>
</head>
<body>
<div class="errors">
    <%
        if (Objects.nonNull(errors)) {
            for (String error : errors) {
    %>
    <div><%=error%></div>
    <%
            }
        }
    %>
</div>

   <form action="${ctx}/addBook?bookid=${book.bookid}" method="post" id="add_book">
    <ul class="box">
        <li>
            <label for="bookname">书名:</label>
            <input type="text" id="bookname" name="bookname" value="${book.bookname}">
            <span class="error1" id="errorTip">提示信息</span>


        </li>
        <li>
            <label for="author">作者：</label>
            <input type="text" id="author" name="author" value="${book.author}">
            <span class="error2" id="errorTip">提示信息</span>


        </li>

        <li>
            <label for="publish">出版社：</label>
            <input type="text" id="publish" name="publish" value="${book.publish}">
            <span class="error3" id="errorTip">提示信息</span>

        </li>
        <li>
            <label for="bookcount">图书库存：</label>
            <input type="text" id="bookcount" name="bookcount" value="${book.bookcount}">
            <span class="error4" id="errorTip">提示信息</span>

        </li>
        <li>
            <label for="booktype">图书类型：</label>
            <select type="text" id="booktype" name="booktype">
                <option <c:if test="${book.booktype=='文学'}">selected</c:if> value="文学">文学</option>
                <option <c:if test="${book.booktype=='小说'}">selected</c:if> value="小说">小说</option>
                <option <c:if test="${book.booktype=='魔幻现实主义'}">selected</c:if> value="魔幻现实主义">魔幻现实主义</option>
                <option <c:if test="${book.booktype=='古典名著'}">selected</c:if> value="古典名著">古典名著</option>
                <option <c:if test="${book.booktype=='现代小说'}">selected</c:if> value="现代小说">现代小说</option>
                <option <c:if test="${book.booktype=='爱情小说'}">selected</c:if> value="爱情小说">爱情小说</option>
                <option <c:if test="${book.booktype=='反乌托邦小说'}">selected</c:if> value="反乌托邦小说">反乌托邦小说</option>
                <option <c:if test="${book.booktype=='浪漫主义小说'}">selected</c:if> value="浪漫主义小说">浪漫主义小说</option>
                <option <c:if test="${book.booktype=='现实主义小说'}">selected</c:if> value="现实主义小说">现实主义小说</option>
                <option <c:if test="${book.booktype=='美国南北战争小说'}">selected</c:if> value="美国南北战争小说">美国南北战争小说</option>
                <option <c:if test="${book.booktype=='阿富汗战争小说'}">selected</c:if> value="阿富汗战争小说">阿富汗战争小说</option>
            </select>
        </li>
        <li name="button">
            <button type="submit" checked="checked">确认信息</button>
            <button type="reset" id="clear">清空</button>
        </li>
    </ul>
</form>
<script>
    $(function () {

        var error_bookname = false;
        var error_author= false;
        var error_publish=false;
        var error_bookcount=false;
        var error_check = false;


        $('#bookname').blur(function () {
            check_bookname();
        });
        $('#publish').blur(function () {
            check_publish();
        });
        $('#bookcount').blur(function () {
            check_bookcount();
        });

        $('#author').blur(function () {
            check_author();
        });



        function check_bookname() {
            var len = $('#bookname').val().length;
            if (len < 2 || len > 20) {
                $('#bookname').next().html('请输入2-20个字符的用户名')
                $('#bookname').next().show();
                error_bookname = true;
            } else {
                $('#bookname').next().hide();
                error_bookname = false;
            }
        }

        function check_author() {
            var len = $('#author').val().length;
            if (len < 2 || len >20) {
                $('#author').next().html('请输入2-20个字符的作者名')
                $('#author').next().show();
                error_author = true;
            } else {
                $('#password').next().hide();
                error_author = false;
            }
        }

        function check_publish() {
            var len = $('#publish').val().length;
            if (len < 2 || len >50) {
                $('#publish').next().html('请输入2-50个字符的出版社名字')
                $('#publish').next().show();
                error_publish = true;
            } else {
                $('#publish').next().hide();
                error_publish = false;
            }
        }

        function check_bookcount() {
            var len = $('#bookcount').val().length;
            if (len < 0|| len >10) {
                $('#bookcount').next().html('请输入数量')
                $('#bookcount').next().show();
                error_bookcount = true;
            } else {
                $('#bookcount').next().hide();
                error_bookcount= false;
            }
        }


        $('.reg_form').submit(function () {
            check_bookname();
            check_publish();
            check_author();
            check_bookcount();

            if (error_bookname == false && error_publish == false&&error_author==false&&error_bookcount==false && error_check == false) {
                return true;
            } else {
                return false;
            }

        })
    });
    document.getElementById('clear').onclick=function (){
        document.querySelector('.error1').style.display="none";
        document.querySelector('.error2').style.display="none";
        document.querySelector('.error3').style.display="none";
        document.querySelector('.error4').style.display="none";

    }

</script>


</body>
</html>
